<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light" style="margin-top:4rpx;margin-bottom: 120rpx;">工单数量趋势图</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>
		<!-- 	<view class="nav">
			<view style="margin-right: 220rpx;">单位：单</view>
			<view class="week-btn" @click="setIndex(0)" :class="currentIndex == 0 ? 'active' : ''">本周</view>
			<view class="year-btn" @click="setIndex(1)" :class="currentIndex == 1 ? 'active' : ''">本年</view>
			<view class="type-btn-line">
				<image src="../../static/icon/line.png" mode=""></image>
			</view>
			<view class="type-btn-column">
				<image src="../../static/icon/column.png" mode=""></image>
			</view>
		</view> -->
		<!-- <view @click="changeType" class="change">切换</view> -->
	</view>
</template>

<script>
	import uCharts from './u-charts/u-charts.js';
	// var this;
	var canvaColumn = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvaColumn: null,
				currentIndex: 1,
				Column: '',
				chartData: ''
			}
		},
		mounted() {
			// this = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			// this.getServerData();
		},
		// onLoad() {
		// 	this = this;
		// 	this.cWidth=uni.upx2px(750);
		// 	this.cHeight=uni.upx2px(500);
		// 	this.getServerData();
		// },
		methods: {
			toJSON() {},
			setIndex(index) {
				console.log('点击', index)
				// this.currentIndex = index
			},
			changeType(type) {
				console.log('点击')
				console.log(type)
				// if(this.canvaColumn.opts.type == 'column') {
				// 	this.canvaColumn.opts.type = 'line'
				// }else {
				// 	this.canvaColumn.opts.type = 'column'
				// }
				console.log(this.canvaColumn)
				this.canvaColumn.opts.type = type
				// this.showColumn("canvasColumn", this.canvaColumn);
				canvaColumn.updateData(this.canvaColumn)
			},
			getServerData(Tendency, time) {
				let Count = []
				Tendency.forEach(item => {
					Count.push(item.工单数量)
				})
				console.log(time)
				let timeArr = []
				Tendency.forEach(item => {
					timeArr.push(item.时间.slice(5))
				})
				if(time == 'date'){
					let Column = {
						categories: timeArr,
						series: [{
							name: "工单数量",
							data: Count
						}]
					}
					this.showColumn("canvasColumn", Column);
				}else {
					let Column = {
						categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12/月'],
						series: [{
							name: "工单数量",
							data: Count
						}]
					}
					this.showColumn("canvasColumn", Column);
				}
				//下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
				// let Column={categories:[],series:[]};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// Column.categories=res.data.Column.categories;
				// Column.categories=['1','2','3','4','5','6','7','8','9','10','11','12']
				// Column.series=res.data.Column.series;
				// let Column = {
				// 	categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12/月'],
				// 	series: [{
				// 		name: "工单数量",
				// 		data: Count
				// 	}]
				// }
				

			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					// colors: ['#3bb4f9'],
					colors: ['#1152FC'],
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						//disabled:true
						min: 0,
						max: 100
					},
					dataLabel: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
				this.canvaColumn = canvaColumn
				console.log(canvaColumn)
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
		position: relative;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 100%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000;

		&:before {
			content: "";
			display: inline-block;
			position: relative;
			top: 4rpx;
			left: 0px;
			width: 16rpx;
			height: 16rpx;
			box-sizing: content-box;
			border: 8rpx solid #1152FC;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 6rpx;
		}
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.nav {
		position: absolute;
		top: 117rpx;
		left: 26rpx;
		display: flex;

		.week-btn {
			margin-right: 32rpx;
			width: 74rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			// margin-right: 46rpx;
		}

		.year-btn {
			width: 74rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			margin-right: 46rpx;
		}

		.active {
			background-color: #1152FC;
			color: #fff;
		}

		.type-btn-line,
		.type-btn-column {
			width: 71rpx;
			height: 48rpx;
		}

		.type-btn-line {
			border: 1rpx solid #279DF5;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 50rpx;
				height: 30rpx;
			}
		}

		.type-btn-column {
			border: 1rpx solid #0366DD;
			background-color: #0366DD;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 50rpx;
				height: 30rpx;
			}
		}
	}
</style>
